<template>
  <div class="custom_param">
    <el-form
      :model="formInline"
      :rules="customDataFormRules"
      ref="customDataForm"
      size="mini"
      label-width="30%"
    >
      <div class="push_button">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label="键:" style="margin-left: -5px" prop="key">
              <el-input
                placeholder="请输入键"
                v-model="formInline.key"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="名称:" prop="name">
              <el-input
                placeholder="请输入名称"
                v-model="formInline.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="类型:" prop="type">
              <el-input
                placeholder="请输入类型"
                v-model="formInline.type"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="customAdd"
                style="background: #2680d2; float: right"
                >添加</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <el-table
      :data="customData"
      max-height="270px"
      style="width: 100%"
      :header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
    >
      <el-table-column prop="key" label="键"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index)"
            type="text"
            icon="el-icon-delete"
            style="color: #ff4d4f"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ["editCustomData", "isedit"],
  data() {
    return {
      customData: [],
      formInline: { key: "", name: "", type: "" },
      customDataFormRules: {
        key: [{ required: true, message: "请输入key", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {
    deleteRow(index) {
      this.customData.splice(index, 1);
    },
    // 增加新数据
    customAdd() {
      this.$refs["customDataForm"].validate((valid) => {
        if (valid) {
          this.customData.unshift({
            key: this.formInline.key,
            name: this.formInline.name,
            type: this.formInline.type,
            lowerLimit: "",
            upperLimit: "",
            value: "",
          });
          this.formInline = { key: "", name: "", type: "" };
          this.$emit("sendCustomDatas", this.customData);
        }
      });
    },
  },
};
</script>

<style scoped>
.el-table tr {
  background-color: #fafafa;
}
.custom_param /deep/ .el-table__row {
  cursor: pointer;
}
</style>
